<!DOCTYPE html>
<!--
Explore native dotted/dashed line support in <canvas>
Mainly based on http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html#introduction
and my research
-->
<html>
    <head>
        <title>Native dotted/dashed line</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="../../../lib/dashed.js"></script>
        <script type="text/javascript">
            function pageLoaded(){
                console.info("Page Loaded");
                
                var quilt = document.getElementById("quilt");
                
                var ctx = quilt.getContext('2d');
                
                repaint();
                
                testSaveRestore(ctx);
            }

            /**
             * Test against context save() and restore()
             * @param {CanvasRenderingContext2D} ctx the context to test
             **/
            function testSaveRestore(ctx){
                
                var dashPattern = [10,10];
                var dashOffset = 15;
                ctx.setLineDash(dashPattern);
                ctx.lineDashOffset = dashOffset;
                
                if(dashPattern.toString() !== ctx.getLineDash().toString()){
                    console.info("Huo");
                }
                
                ctx.save();
                ctx.setLineDash([20,20]);
                ctx.lineDashOffset = 20;
                ctx.restore();
                if(dashPattern.toString() !== ctx.getLineDash().toString()){
                    console.info("Huo setLineDash(...)");
                }
                
                if(dashOffset !== ctx.lineDashOffset){
                    console.info("Huo lineDashOffset");
                }
            }
            
            
            var i = 0;
            function repaint(){
                paintQuilt();
                paintDotted(3);
                paintDashed(3);
                paintPattern(3);
                
                i = (i + 2) % 10;
                
//                setTimeout(repaint, 500);
            }

            
            function paintGrid(){
                var quilt = document.getElementById("quilt");
                var ctx = quilt.getContext('2d');
                
                ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'rgba(10,10,10,0.1)';
                
                //columns
                for(var i=0;i<quilt.width;i+=20){
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, quilt.height);
                }
                
                //rows
                for(var i=0;i<quilt.height;i+=20){
                    ctx.moveTo(0, i);
                    ctx.lineTo(quilt.width, i);
                }
                ctx.stroke();
                
                ctx.restore();
            }
            
            
            function paintQuilt(){
                var quilt = document.getElementById("quilt");
                
                var ctx = quilt.getContext('2d');
                ctx.save();
                ctx.fillStyle = '#FFFFFF';
                ctx.fillRect(0,0,quilt.width, quilt.height);
                
                paintGrid();
                
                ctx.setLineDash([10,10]); //     
                ctx.lineDashOffset = 5;
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
//                ctx.lineCap = 'bevel';
//                ctx.lineCap = 'miter';
                
                console.info("Line dash = " + ctx.getLineDash());
                
                
                //first line
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(80, 80);
                ctx.lineTo(140, 80);
                ctx.lineTo(140, 140);
                ctx.stroke();
                
                //circle
                ctx.beginPath();
//                ctx.moveTo(50, 150);
                ctx.arc(50, 150, 40, 0, 2 * Math.PI, false);                
//                ctx.arc(65,65,50,0,2 * Math.PI,false);                
                ctx.stroke();
                
                ctx.restore();
            }
            
            function paintDotted(size){
                var quilt = document.getElementById("quilt");                
                var ctx = quilt.getContext('2d');
                
                ctx.save();
                ctx.beginPath();
                //propert pattern
                ctx.lineWidth = size;
                ctx.setLineDash([1,size * 2]);
                
                /**@see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineCap_example*/
                ctx.lineCap = 'round';
//                ctx.lineCap = 'square';   
//                ctx.lineJoin = 
                
                ctx.moveTo(0, 250);
                ctx.lineTo(250, 250);
                ctx.stroke();
                
                ctx.restore();
            }
            
            
            function paintDashed(size){
                var quilt = document.getElementById("quilt");                
                var ctx = quilt.getContext('2d');
                
                ctx.save();
                ctx.beginPath();
                //propert pattern
                ctx.lineWidth = size;
//                ctx.setLineDash([size * 3,size * 3]);
                ctx.setLineDash([size * 3,size * 3]);
                
                /**@see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineCap_example*/
                ctx.lineCap = 'round';
//                ctx.lineCap = 'square';   
//                ctx.lineJoin = 
                
                ctx.moveTo(0, 270);
                ctx.lineTo(270, 270);
                ctx.stroke();
                
                ctx.restore();
            }
            
            
            function paintPattern(size){
                var quilt = document.getElementById("quilt");                
                var ctx = quilt.getContext('2d');
                
                ctx.save();
                ctx.beginPath();
                //propert pattern
                ctx.lineWidth = size;
//                ctx.setLineDash([size * 3,size * 3]);
                ctx.setLineDash([size * 3,size * 3, size, size * 3]);
                
                /**@see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineCap_example*/
                ctx.lineCap = 'round';
//                ctx.lineCap = 'square';   
//                ctx.lineJoin = 
                
                ctx.moveTo(0, 290);
                ctx.lineTo(290, 290);
                ctx.stroke();
                
                ctx.restore();
            }
            
            
            window.addEventListener("load", pageLoaded, false);
        </script>
    </head>
    <body>
        <div>
            <canvas style="border: 1px solid red;" id="quilt" width="300" height="300"></canvas>
        </div>
    </body>
</html>
